<template>
	<div class="app-container">
		<div class="content">
			<Editor id="tinymce" v-model="tinymceHtml" :init="init" />
		</div>
	</div>
</template>
<script setup>
import { ref, onMounted, watch, getCurrentInstance } from 'vue';
import tinymce from 'tinymce/tinymce';
// 使用该方法需要引入下面的数据
// import "tinymce/models/dom"; // 特别注意 tinymce 6.0.0 版本之后必须引入，否则不显示
import 'tinymce/themes/silver/theme';
import Editor from '@tinymce/tinymce-vue'; // 引入组件
import 'tinymce/themes/silver/theme'; // 引用主题文件
import 'tinymce/icons/default'; // 引用图标文件
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table'; //插入表格
import 'tinymce/plugins/autoresize';
import 'tinymce/plugins/autosave';
import 'tinymce/plugins/charmap'; //特殊字符
import 'tinymce/plugins/code'; //查看源码
import 'tinymce/plugins/codesample'; //插入代码1
import 'tinymce/plugins/directionality'; //
import 'tinymce/plugins/fullscreen'; //全屏
import 'tinymce/plugins/image'; //图片
import 'tinymce/plugins/imagetools'; //图片工具
import 'tinymce/plugins/importcss'; //图片工具
import 'tinymce/plugins/media'; //媒体插入
import 'tinymce/plugins/preview'; //预览
import 'tinymce/plugins/quickbars'; //快捷菜单
import 'tinymce/plugins/searchreplace'; //查询替换
import 'tinymce/plugins/tabfocus'; //
import 'tinymce/plugins/textpattern';
import { useWindowSize } from '@vueuse/core';
const { width, height } = useWindowSize();
let init = {
	//初始化数据
	language_url: 'tinymce/langs/zh-Hans.js', // 中文语言包路径
	language: 'zh-Hans',
	skin_url: '/tinymce/skins/ui/oxide', // skin路径
	content_css: '/tinymce/skins/content/default/content.css', //以css文件方式自定义可编辑区域的css样式，css
	selector: 'textarea',
	height: 400, // 限制高度
	min_height: 400,
	max_height: height.value - 200, // 限制高度
	statusbar: false,
	plugins: '  tabfocus    quickbars  importcss  autosave ', // 插件需要import进来
	toolbar:
		'formats undo redo  fontsizeselect fontselect   searchreplace preview pagebreak media image|outdent indent aligncenter alignleft alignright alignjustify lineheight  underline quicklink h2 h3 blockquote numlist bullist table removeformat forecolor backcolor bold italic  strikethrough  charmap link codesample code  preview fullscreen', //工具栏展示的
	content_style: 'p {margin: 5px 0; font-size: 14px}',
	fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
	font_formats:
		'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
	branding: false,
	elementpath: false,
	resize: false, // 禁止改变大小
	paste_data_images: true, // 允许粘贴图像
	//   图片上传
	// images_upload_handler: async (blobInfo, success) => {
	// 	//官网写法，返回的图片路径为base64
	// 	var reader = new FileReader();
	// 	reader.readAsDataURL(blobInfo.blob());
	// 	reader.onload = function () {
	// 		success(this.result);
	// 	};
	// },
	//   图片上传
	images_upload_handler: async (blobInfo, success) => {
		//官网写法，返回的图片路径为base64
		var reader = new FileReader();
		reader.readAsDataURL(blobInfo.blob());
		reader.onload = function () {
			success(this.result);
		};
	},
};

const tinymceHtml = ref('');
onMounted(() => {
	tinymce.init({}); // 初始化富文本
});

const saveEditor = () => {
	return tinymceHtml.value;
};

const setReset = () => {
	tinymce.init({});
	tinymceHtml.value = '';
};
defineExpose({
	saveEditor,
	setReset,
});
</script>
<style lang="scss" scoped>
.app-container {
	height: 100%;
	.ant-btn {
		margin: 10px;
		height: 30px;
	}
	.content {
		width: 100%;
		height: 95%;
	}
}
</style>
